$(function () {
    console.log("运行了");
    //多次定时器，在一定的时间后，再执行代码
    //setinterval(function(){需要重复执行的代码，时间})
    var num = 0;
    var times;

    function go() {
        times = setInterval(function () {
            num++;
            if (num > $('.banner1 ul li').length - 1)
                num = 0;
            console.log(num);
            $('.banner1 ul li').eq(num).fadeIn(800);
            $('.banner1 ul li').eq(num).siblings().fadeOut(800);

            // $('.box').fadeOut(1000);
            //导航图标变化
            $('.gps li').eq(num).addClass('active');
            $('.gps li').eq(num).siblings().removeClass('active');


        }, 4000)
    }

    go();


    //复合鼠标事件:效果，悬浮鼠标在图片上，则停止循环播放图片
    $('.banner1').hover(function () {
        clearInterval(times);
    }, function () {
        go();
    })

    //鼠标指定导航图标
    $('.gps li').mouseenter(function () {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
        //图片跟随指定
        num = $(this).index();
        $('.banner1 ul li').eq(num).fadeIn(800);
        $('.banner1 ul li').eq(num).siblings().fadeOut(800);
    })


//搜索框聚焦事件
    $('.input').focus(function () {
        console.log("获得焦点");
        // 多值用，对象形式赋值属性{:}

        //动作：返回窗口顶部
        $('html').animate({scrollTop: 0}, 1000);
        // 大标题
        $('.head_text h1').css({
            'color': 'red',
            'transform': 'scale(1.2)',
            'transition': '1s'
        });
        //输入框
        $('.head_text input').css({
            'transform': 'translate(0px,-100px)',
            'transition': '1s'
        });

        //搜索logo
        $('.head_text .img2').css({
            'transform': 'translate(0px,-100px)',
            'transition': '1s'
        });
        //左边图标 消失
        $('.img1').fadeOut(500);
        //苹果logo,移动退出
        // $('.img_logo').css({
        //   'transform':'scale(1.6)',
        //   'transition':'2s'
        // })
        $('.head_text').css('height', '650px');
    })
    $('.input').blur(function () {
        console.log("失去焦点");

        //窗体
        $('.head_text').css('height', '450px');
        //大标题
        $('.head_text h1').css({
                'color': 'black'
                , 'transform': 'scale(1)'
            }
        );
        //输入框
        $('.head_text input').css({
            'transform': 'translate(0px,1px)',
            'transition': '1s'
        });
        //搜索logo
        $('.head_text .img2').css({
            'transform': 'translate(0px,1px)',
            'transition': '1s'
        });
        //左边图标 出现
        $('.img1').fadeIn(500);
        //苹果logo 移动进入
        // $('.img_logo').css({
        //   'transform':'scale(1)',
        //   'transition':'2s'
        // })
    })

    //距离顶部一定距离，显示返回顶部图标
    $(window).scroll(function () {
        if ($(window).scrollTop() > 500) {
            //fadein渐变出现
            // $('.return_top').fadeIn(800);
            $('.return_top').css({'display': 'block'});
        } else {
            //fadein渐变消失
            // $('.return_top').fadeOut(800);
            $('.return_top').css({'display': 'none'});
        }
    });

    //点击图标回到页面顶部
    $('.return_top').click(function () {
        if ($('html').scrollTop()) {
            $('html').animate({scrollTop: 0}, 1200);
        }
        $('body').animate({scrollTop: 0}, 1200);
    });

    //打开登录页面
    $('.login_key').click(function () {
        $('.login').css({'display': 'block'});


    });

    //打开登录页面
    $('.confirm').click(function () {
        $('.login2').css({'display': 'block'});

    });
    //关闭登录页面
    $('.top_img .img2').click(function () {
        $('.login').css({'display': 'none'});
    });

    //login页面js设置

//登录账号和密码输入框聚焦事件
//得到
    $('.input1').focus(function () {
        console.log("获得焦点");
        $('.input1').css({
            'color': 'red',
        });
    })
// 失去
    $('.input1').blur(function () {
        $('.input1').css({
            'color': 'black',
        });
    })

})


